<div class="separator" ng-if="vm.isSeparator(vm.bookmark)" data-id="{{vm.bookmark.id}}"></div>
<div class="menu" ng-class="{ 'animate animate-fade-in': vm.enableSelect }" ng-if="vm.enableSelect"
     ng-show="vm.isSelected" tabindex="-1">
  <div class="buttons">
    <icon-button type="'share-2'" fab="true" title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.ShareBookmark) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.shareBookmark(), $event, vm.bookmark)"></icon-button>
    <icon-button type="'edit'" fab="true" title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.EditBookmark) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.editBookmark(), $event, vm.bookmark)"></icon-button>
    <icon-button type="'trash-2'" fab="true" class="btn-delete-bookmark"
                 title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.DeleteBookmark) }}"
                 on-click="vm.utilitySvc.handleEvent(vm.deleteBookmark(), $event, vm.bookmark)"></icon-button>
  </div>
</div>
<div class="bookmark-content" ng-if="vm.bookmark.url && !vm.isSeparator(vm.bookmark)"
     ng-click="!vm.enableSelect && vm.utilitySvc.handleEvent(vm.appHelperSvc.openUrl, $event,  vm.bookmark.url)"
     hm-tap="vm.utilitySvc.handleEvent(vm.appHelperSvc.openUrl, $event,  vm.bookmark.url)" data-id="{{vm.bookmark.id}}">
  <h4 class="bookmark-heading">
    {{ vm.bookmark.title ? vm.bookmark.title : vm.bookmarkHelperSvc.getBookmarkTitleForDisplay(vm.bookmark) }}
  </h4>
  <div class="bookmark-text">
    <div class="description">{{  vm.bookmark.description }}</div>
    <div class="url">{{  vm.bookmark.url }}</div>
  </div>
</div>
<div class="bookmark-content" ng-if="!vm.bookmark.url && !vm.isSeparator(vm.bookmark)" data-id="{{vm.bookmark.id}}">
  <h4 class="bookmark-heading" ng-class="{ 'opening': vm.bookmark.open && !vm.bookmark.displayChildren }"
      ng-click="vm.utilitySvc.handleEvent(vm.clickBookmarkHeading, $event, vm.bookmark)" ng-if="vm.bookmark.title">
    {{ vm.bookmarkHelperSvc.getBookmarkTitleForDisplay(vm.bookmark) }}
    <icon type="vm.bookmark.open && vm.bookmark.displayChildren  ? 'folder-open' : 'folder'" class="folder"></icon>
    <icon type="vm.bookmark.open && vm.bookmark.displayChildren ? 'chevron-up' : 'chevron-down'" bold="true"
          class="chevron">
    </icon>
    <span ng-show="vm.bookmark.open && !vm.bookmark.displayChildren">
      <span class="spinner-border spinner-border-sm" aria-hidden="true">
      </span>
    </span>
  </h4>
  <div ng-if="vm.bookmark.displayChildren">
    <p class="empty" ng-if="!vm.bookmark.children || vm.bookmark.children.length === 0">
      {{ vm.platformSvc.getI18nString(vm.Strings.View.Search.FolderEmpty) }}
    </p>
    <ng-transclude></ng-transclude>
  </div>
</div>
<icon-button type="'edit'" size="1.2rem" class="btn-edit-bookmark"
             title="{{ vm.platformSvc.getI18nString(vm.Strings.Button.EditBookmark) }}"
             on-click="vm.utilitySvc.handleEvent(vm.editBookmark(), $event,  vm.bookmark)"
             ng-if="vm.enableEditButton && vm.bookmark.url && !vm.isSeparator(vm.bookmark)"></icon-button>
